<template>
  <q-btn
    :label="btnLabel"
    :outline="mobile"
    :rounded="mobile"
    :flat="!mobile"
    :round="!mobile"
    dense
    :color="color"
    :icon="btnIcon"
    @click="btnClick"
  >
    <q-tooltip v-if="!mobile">{{label}}</q-tooltip>
  </q-btn>
</template>
<script>

export default {
  name: 'CcBtn',
  props: {
    label: [Number, String],
    icon: String,
    color: String,
  },
  data() {
    return {
      mobile: false,
      btnLabel: null,
      btnIcon: undefined,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.mobile = this.$q.platform.is.mobile;
      this.outline = this.mobile;
      this.rounded = this.mobile;
      this.flat = !this.mobile;
      this.round = !this.mobile;
      if (this.mobile) {
        this.btnLabel = this.label;
      } else {
        this.btnIcon = this.icon;
      }
    },
    btnClick(a, b, c, d) {
      this.$emit('click', a, b, c, d);
    },
  },
  watch: {
    label() {
      this.init();
    },
    icon() {
      this.init();
    },
    color() {
      this.init();
    }
  }
};

</script>
<style scoped lang="stylus">
</style>
